<!--
 * Description: FD估价任务页面
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/05/27 9:16
-->

<template>
  <BaseWrap>
    <!-- 查询条件 -->
    <BaseFunc
      drawer-size="600"
      :is-requesting="isRequesting"
      :query-form="queryForm"
      :visible.sync="advanceOptionDrawer"
      @query="query"
    >
      <!--抽屉内部查询表单-->
      <template>
        <el-form class="g-advance-drawer-form" label-width="110px" :model="queryForm" size="mini">
          <el-row>
            <!--FD编号-->
            <el-col :span="6">
              <el-form-item :label="$t('serverBom.fdId')">
                <el-input v-model="queryForm.serverBomId" clearable />
              </el-form-item>
            </el-col>

            <!--FD版本-->
            <el-col :span="6">
              <el-form-item :label="$t('serverBom.version')">
                <el-input v-model="queryForm.version" clearable />
              </el-form-item>
            </el-col>

            <!--Temp Model Number-->
            <el-col :span="6">
              <el-form-item label="Temp Model">
                <el-input v-model="queryForm.tempModelNumber" clearable />
              </el-form-item>
            </el-col>

            <!--任务编号-->
            <el-col :span="6">
              <el-form-item :label="$t('serverBom.taskId')">
                <el-input v-model="queryForm.taskId" clearable />
              </el-form-item>
            </el-col>

            <!--任务备注-->
            <el-col :span="6">
              <el-form-item :label="$t('serverBom.remark')">
                <el-input v-model="queryForm.remark" clearable />
              </el-form-item>
            </el-col>

            <!--开始时间-->
            <el-col :span="6">
              <el-form-item :label="$t('serverBom.beginTime')">
                <el-date-picker
                  v-model="queryForm.beginTime"
                  clearable
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
              </el-form-item>
            </el-col>

            <!--结束时间-->
            <el-col :span="6">
              <el-form-item :label="$t('serverBom.endTime')">
                <el-date-picker
                  v-model="queryForm.endTime"
                  clearable
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </BaseFunc>

    <!--报价FD数据表格-->
    <BaseTable
      :is-requesting="isRequesting"
      :page-number.sync="pageNumber"
      :page-size.sync="pageSize"
      :table-data="tableData"
      :total="total"
      @query="query"
    >
      <!-- 左浮动 -->
      <template slot="header">
        <!--序号列-->
        <el-table-column align="center" fixed :label="$t('table.NO')" min-width="60px">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
      </template>
      <template>
        <!--FD编号列-->
        <el-table-column
          align="center"
          :label="$t('serverBom.fdId')"
          min-width="200px"
          prop="serverBomId"
          sortable
        />

        <!--FD版本列-->
        <el-table-column
          align="center"
          :label="$t('serverBom.version')"
          min-width="100px"
          prop="version"
          sortable
        />

        <!--FD名称-->
        <el-table-column
          align="center"
          :label="$t('serverBom.fdName')"
          min-width="150px"
          prop="serverBomName"
          show-overflow-tooltip
          sortable
        />
        <!--任务编号列-->
        <el-table-column
          align="center"
          :label="$t('serverBom.taskId')"
          min-width="280px"
          prop="taskId"
          sortable
        />

        <!--任务备注列-->
        <el-table-column
          align="center"
          :label="$t('serverBom.remark')"
          min-width="280px"
          prop="remark"
          sortable
        />

        <!--开始时间列-->
        <el-table-column
          align="center"
          :label="$t('serverBom.beginTime')"
          min-width="140px"
          prop="beginTime"
          sortable
        />

        <!--结束时间列-->
        <el-table-column
          align="center"
          :label="$t('serverBom.endTime')"
          min-width="140px"
          prop="endTime"
          sortable
        />

        <el-table-column align="center" fixed="right" label="是否完成" min-width="90px">
          <template slot-scope="scope">
            <span v-if="scope.row.isComplete" class="tag-green">{{ '已完成' }}</span>
            <span v-else class="tag-red">{{ '未完成' }}</span>
          </template>
        </el-table-column>
      </template>

      <!-- 右浮动 -->
      <template slot="end">
        <!--操作列-->
        <el-table-column
          align="center"
          fixed="right"
          :label="$t('table.operate')"
          min-width="140px"
        >
          <template slot-scope="scope">
            <el-button
              v-if="$hasPer('view')"
              size="mini"
              type="text"
              @click="rowView(scope.$index, scope.row)"
            >
              <i class="el-icon-view el-icon--right"></i>
              {{ $t('button.view') }}
            </el-button>
            <el-button
              v-if="$hasPer('evaluation')"
              size="mini"
              type="text"
              @click="rowEvaluation(scope.$index, scope.row)"
            >
              <i class="el-icon-document-add el-icon--right"></i>
              {{ $t('button.claim') }}
            </el-button>
          </template>
        </el-table-column>
      </template>
    </BaseTable>

    <!--查看对话框-->
    <BaseDialog
      v-if="viewDialogVisible"
      custom-class="mini-head-dialog"
      :fullscreen="true"
      :show-close="false"
      :visible.sync="viewDialogVisible"
    >
      <ServerTabView
        v-if="viewDialogVisible"
        :input-data="currentEditRow"
        :visible.sync="viewDialogVisible"
      />
    </BaseDialog>

    <!--估价分配对话框-->
    <BaseDialog
      v-if="evaluationDialogVisible"
      custom-class="mini-head-dialog"
      :fullscreen="true"
      :show-close="false"
      :visible.sync="evaluationDialogVisible"
    >
      <ServerTabClaim
        v-if="evaluationDialogVisible"
        action-type="evaluation"
        :input-data="currentEditRow"
        :task-data="currentTaskData"
        :visible.sync="evaluationDialogVisible"
        @cancel="afterEditSave"
      />
    </BaseDialog>
  </BaseWrap>
</template>
<script>
import { fdQuery } from '@/api/quote/fd'
import { serverPageListUnFinish } from '@/api/serverbom/cost'
import ServerTabView from './components/ServerTabView'
import ServerTabClaim from './components/ServerTabClaim'
// import { fileExportCostTask } from '@/api/quote/file-export'

export default {
  name: 'ServerbomClaim',
  components: { ServerTabView, ServerTabClaim },
  data() {
    return {
      // 正在查询
      isRequesting: false,
      // 高级查询选项抽屉弹出标识
      advanceOptionDrawer: false,
      // 页码
      pageNumber: 1,
      // 页展示行数
      pageSize: 10,
      // 总行数
      total: 0,
      // 表格数据
      tableData: [],
      // 查询表单对象
      queryForm: {
        beginTime: '',
        complete: '',
        endTime: '',
        fdId: '',
        remark: '',
        taskId: '',
        version: '',
        isComplete: '',
        tempModelNumber: ''
      },
      // 当前行任务数据
      currentEditRow: null,
      // 当前行任务数据
      currentTaskData: null,
      // 查看对话框可见标识
      viewDialogVisible: false,
      // 估价对话框可见标识
      evaluationDialogVisible: false
    }
  },
  created() {
    this.pageDataInit()
  },
  methods: {
    /* 页面数据初始化*/
    pageDataInit() {
      this.$store.dispatch('category/initCategoryCollectsLazy')
      this.$store.dispatch('material/initMaterialCollectsLazy')
      this.$store.dispatch('commodity/initCommodityCollectsLazy')
      this.query()
    },
    /* 查询表格数据*/
    async query() {
      try {
        this.isRequesting = true
        this.advanceOptionDrawer = false
        const res = await serverPageListUnFinish({
          pageSize: this.pageSize,
          pageNumber: this.pageNumber,
          pageCondition: this.queryForm
        })
        this.tableData = res.data.list
        this.total = res.data.total
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    async getCurrentEditRow(row) {
      const res = await fdQuery({ fdId: row.fdId, version: row.version })
      this.currentEditRow = { ...res.data, taskId: row.taskId }
    },
    /* 行记录查看*/
    async rowView(index, row) {
      // await this.getCurrentEditRow(row)
      // if (Object.keys(this.currentEditRow).length <= 1) {
      //   return this.$message({
      //     message: '该行详情数据为空',
      //     type: 'error',
      //     duration: 1500
      //   })
      // }
      this.currentEditRow = row
      this.viewDialogVisible = true
    },
    // 行记录估价
    async rowEvaluation(index, row) {
      this.currentTaskData = row
      // await this.getCurrentEditRow(row)
      // if (Object.keys(this.currentEditRow).length <= 1) {
      //   return this.$message({
      //     message: '该行详情数据为空',
      //     type: 'error',
      //     duration: 1500
      //   })
      // }
      this.currentEditRow = row
      this.evaluationDialogVisible = true
    },
    // 修改保存之后
    afterEditSave() {
      this.evaluationDialogVisible = false
      this.query()
    }
    // 下载
    // async rowDown(index, row) {
    //   try {
    //     const sessionUser = this.$store.getters['user/getSessionUser']
    //     await this.$confirmBox(this.$t('button.down'), 'success')
    //     this.isRequesting = true
    //     const res = await fileExportCostTask(
    //       { taskId: row.taskId, userId: sessionUser.userId },
    //       { downExcelFile: true, msgSuccess: true, msgError: true }
    //     )
    //     this.$downFile(res)
    //   } catch (error) {
    //     console.log(error)
    //   } finally {
    //     this.isRequesting = false
    //   }
    // }
  }
}
</script>
